<template>
  <div>
    <scEcharts height="250px" :option="option"></scEcharts>
  </div>
</template>

<script setup>
import scEcharts from "@/components/scEcharts"
import * as echarts from "echarts"

const option = ref({
  grid: {
    top: "60px",
  },
  tooltip: {
    trigger: "axis",
    textStyle: {
      fontSize: 12 // 字体大小
    },
  },
  legend: {
    data: [
      "注册医生数",
      "注册护士数",
    ],
    top: 6, //调整图例位置
    icon: 'circle',
    itemWidth: 8,
    itemHeight: 8,
    itemGap: 16,
    icon: "circle",
    formatter: function (_name) {
      return `{a|${_name}}`;
    },
    textStyle: {
      color: "#333333",
      fontSize: 12,
      rich: {
        a: {
          verticalAlign: "middle",
          padding: [4, 0, 0, 0],
        },
      },
    },
  },
  xAxis: {
    type: "category",
    data: [
      "1月",
      "2月",
      "3月",
      "4月",
      "5月",
      "6月",
      "7月",
      "8月",
      "9月",
      "10月",
      "11月",
      "12月",
    ]
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      name: "注册医生数",
      data: [120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70],
      type: "bar",
      barCategoryGap: "30%",
      itemStyle: {
        borderRadius: [2, 2, 0, 0]
      },
      color: {
        type: "linear",
        x: 0, //右
        y: 0, //下
        x2: 0, //左
        y2: 1, //上
        colorStops: [
          {
            offset: 0,
            color: "#0984e3", // 0% 处的颜色
          },
          {
            offset: 1,
            color: "#74b9ff", // 100% 处的颜色
          }
        ]
      }
    },
    {
      name: "注册护士数",
      data: [110, 180, 120, 120, 60, 90, 110, 110, 180, 120, 120, 60],
      type: "bar",
      barCategoryGap: "30%",
      itemStyle: {
        borderRadius: [2, 2, 0, 0]
      },
      color: {
        type: "linear",
        x: 0, //右
        y: 0, //下
        x2: 0, //左
        y2: 1, //上
        colorStops: [
          {
            offset: 0,
            color: "#00cec9", // 0% 处的颜色
          },
          {
            offset: 1,
            color: "#81ecec", // 100% 处的颜色
          }
        ]
      }
    },
  ],
})
</script>

<style></style>
